<!--
  -    Copyright (c) 2018-2025, hycloud All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: hycloud
  -->
<template>
    <div class="execution physical-schedule">
        <!-- <basic-container v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)"> -->
        <basic-container v-loading="loading">
            <div class="left-block">
                <div class="left-block-top">
                    <a-calendar v-model:value="value" valueFormat="YYYY-MM-DD" :fullscreen="false" @select="onSelect" @change="onChange">\
                        <div class="ant-fullcalendar-date" slot="dateFullCellRender" slot-scope="value">
                            <div class="ant-fullcalendar-value" :class="{'slight-item': listData.indexOf(dayjs(value).format('YYYY-MM-DD')) != -1}">{{dayjs(value).format('DD')}}</div>
                            <div class="ant-fullcalendar-content"></div>
                        </div>
                    </a-calendar>
                      <span style="color: red;margin-left: 20px;font-size:14px;">红色下划线为可选日期,请提前一天预约</span>
                </div>
                <div class="left-block-bottom">
                    <div class="bottom-header">
                        当值医生
                    </div>
                    <el-radio-group v-model="radio" v-if="doctorList.length > 0" @change="choseDorcter">
                        <div class="radio-block" v-for="item in doctorList">
                            <el-radio :label="item.doctorId">{{item.doctorName}}
                            </el-radio>
                            <span class="detail-span" @click="goDetail(item)">资料</span>
                        </div>
                    </el-radio-group>
                    <div v-else class="empty-block">
                        <img :src="img" alt="">
                        <p>暂无数据</p>
                    </div>
                </div>
            </div>
            <div class="right-block">
                <div class="operate-block">
                    <div class="date-tip">{{date}}</div>
                   <button type="button" @click="refresh" class="el-button el-button--default el-button--small is-circle"><!----><i class="el-icon-refresh"></i><!----></button>
                   <span style="color: red;margin-left: 20px;">请先选择需要预约的日期和当值医生，再选择需要预约的时间段，点击【预约】按钮进行预约。</span>
                </div>
                <div class="period-list" v-if="swList.length > 0">
                    <div class="bottom-header">
                        上午：
                    </div>
                    <div class="period-list-item blue" :class="{'finish': item.yystatus === '2', 'green': canReserve && item.status == '1' && item.yystatus == '1'}" v-for="item in swList" :key="item.periodId">
                        <div class="item-block">
                            <p>{{item.periodName}}</p>
                            <p v-if="item.yystatus === '2'">已过期</p>
                            <p v-if="item.yystatus == '1' && item.hasBill">您已预约成功</p>
                            <p v-if="item.yystatus == '1' && !item.hasBill">已预约</p>
                            <p><el-button type="primary" v-if="canReserve && item.status == '1' && item.yystatus == '0'" @click="addObj(item)">预约</el-button></p>
                            <p><el-button v-if="canReserve && item.status == '1' && item.yystatus == '1' && item.canCancel" @click="cancel(item)">取消</el-button></p>
                        </div>
                    </div>
                </div>
                <div class="period-list" v-if="xwList.length > 0">
                    <div class="bottom-header">
                        下午：
                    </div>
                    <div class="period-list-item blue" :class="{'finish': item.yystatus === '2', 'green': canReserve && item.status == '1' && item.yystatus == '1'}" v-for="item in xwList" :key="item.periodId">
                        <div class="item-block">
                            <p>{{item.periodName}}</p>
                            <p v-if="item.yystatus === '2'">已过期</p>
                            <p v-if="item.yystatus == '1' && item.hasBill">您已预约成功</p>
                            <p v-if="item.yystatus == '1' && !item.hasBill">已预约</p>
                            <p><el-button type="primary" v-if="canReserve && item.status == '1' && item.yystatus == '0'" @click="addObj(item)">预约</el-button></p>
                            <p><el-button v-if="canReserve && item.status == '1' && item.yystatus == '1' && item.canCancel" @click="cancel(item)">取消</el-button></p>
                        </div>
                    </div>
                </div>
                 <el-dialog
                    title="通告"
                    class="notice-dia"
                    :close-on-click-modal="false"
                    :close-on-press-escape="false"
                    :show-close="false"
                    :modal-append-to-body="false"
                    :visible.sync="dialogVisible"
                    width="30%">
                    <span>{{notice}}</span>
                </el-dialog>
                 <el-dialog
                    title="提示"
                    :modal="false"
                    :close-on-click-modal="false"
                    :close-on-press-escape="false"
                    :show-close="false"
                    :modal-append-to-body="false"
                    :visible.sync="dialogVisible1"
                    width="30%">
                    <span>当前时间未开放预约</span>
                </el-dialog>
            </div>
            <el-dialog
                title="医生资料"
                class="doctor-dialog"
                vi-if="dialogVisible2"
                :visible.sync="dialogVisible2"
                :close-on-click-modal="false"
                width="70%">
                <div class="content">
                    <el-form :model="personData" label-width="100px">
                        <!-- <el-row>
                            <el-form-item label="头像">
                                <img height="150" :src="personData.avatar" alt="">
                             </el-form-item>
                        </el-row> -->
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="姓名">
                                    <span>{{personData.doctorName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="性别">
                                    <span>{{personData.sexName}}</span>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="12">
                                <el-form-item label="编码">
                                    <span>{{personData.no}}</span>
                                </el-form-item>
                            </el-col> -->
                        </el-row>
                        <el-row>
                            <!-- <el-col :span="12">
                                <el-form-item label="性别">
                                    <span>{{personData.sexName}}</span>
                                </el-form-item>
                            </el-col> -->
                            <el-col :span="12">
                                <el-form-item label="所属医院">
                                    <span>{{personData.hospital}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!-- <el-row>
                            <el-col :span="12">
                                <el-form-item label="学历">
                                    <span>{{personData.education}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系电话">
                                    <span>{{personData.phone}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="职务">
                                    <span>{{personData.post}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="工龄">
                                    <span>{{personData.workYear}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="履历">
                                    <span>{{personData.experience}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row> -->
                    </el-form>
                </div>
            </el-dialog>
        </basic-container>
       
    </div>
</template>

<script>
    import {getDoctorList, getDoctorReserve} from '@/api/physical/physicalschedule'
    import {addObj, cancel} from '@/api/physical/physicalbill'
    import {getReservePeriod} from '@/api/reserve/reserveitem'
    import {getDateObj} from '@/api/reserve/reservedate'
    import eventBus from '@/util/eventBus'
    import {getCurrentDate, dateFormat} from '@/util/date'
    import {findByvalue} from '@/util/util'
    import dayjs from 'dayjs'
    import { remote } from "@/api/admin/dict";

    export default {
        name: 'physicalschedule',
        data() {
            return {
                loading: false,
                radio: '',
                dataObj: {},
                personData: {},
                canReserve: true,
                notice: '',
                listData: [],
                month: getCurrentDate('month'),
                status: '1',
                isOpenDate: true,
                dialogVisible: false,
                dialogVisible1: false,
                dialogVisible2: false,
                periodList: [],
                date: '',
                genderList: [],
                swList: [],
                xwList: [],
                week_day: [],
                dates: dateFormat(new Date(), 'yyyy-MM-dd'),
                img: require('../../../../public/img/empty.svg'),
                value: '',
                doctorList: []
            }
        },
        computed: {
        },
        created() {
            remote('week_day').then(response => {
                this.week_day = response.data.data
            })
            remote('gender').then(response => {
                this.genderList = response.data.data
            })
            this.getDates()
            this.eventBusHandle()
            this.getReservePeriod()
        },
        methods: {
            dayjs,
            getDates(month) {
                let params = {
                    month: month || this.month,
                    reserveType: 'physical'
                }
                getDateObj(params).then(response => {
                    this.listData = response.data.data
                })
            },
            onChange(value) {
                let month =  dateFormat(new Date(value), 'yyyy-MM')
                this.getDates(month)
            },
            getReservePeriod() {
                let params = {
                    date: this.dates,
                    type: 'physical'
                }
                getReservePeriod(params).then(response => {
                    this.dataObj = response.data.data
                    this.status = response.data.data.status
                    this.isOpenDate = response.data.data.isOpenDate
                    if (response.data.data.status === '0') {
                        this.notice = response.data.data.notice
                        this.dialogVisible = true
                    } else {
                        this.dialogVisible = false
                        if(response.data.data.isOpenDate) {
                            this.dialogVisible1 = false
                            this.periodList = response.data.data.periodList
                            this.swList = response.data.data.periodList.filter(item => {
                                return item.type === '1'
                            })
                            this.xwList = response.data.data.periodList.filter(item => {
                                return item.type === '2'
                            })
                            let newdate = new Date(this.dates)
                            this.date = (newdate.getMonth() + 1) + '月' + newdate.getDate() + '日' + '  ' + findByvalue(this.week_day, String(newdate.getDay()))
                            this.dates = dateFormat(newdate, 'yyyy-MM-dd')
                            getDoctorList({date: this.dates}).then(response => {
                                this.doctorList = response.data.data
                                this.radio = response.data.data.length ? response.data.data[0].doctorId: ''
                                this.getDoctorReserve(this.radio)
                            })
                        } else {
                            this.dialogVisible1 = true
                        }
                    }
                })
            },
            addObj(item) {
                this.$confirm('如预约后无法到场的，请提前半个小时取消预约；如未到场又未取消预约的，将记为一次爽约。当月如累计三次爽约，将自第三次爽约起15日内无法预约，是否确定预约？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'red-confirm',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        billDate: this.dates,
                        doctorId: this.radio,
                        periodId: item.periodId
                    }
                    addObj(params).then(response => {
                        this.$message.success('预约成功')
                        this.getDoctorReserve(this.radio)
                    })
                })
            },
            eventBusHandle () {
                let _this = this
                eventBus.$on('isPhysical', function () {
                    _this.refresh()
                })
            },
            refresh() {
                let params = {
                    date: this.dates,
                    type: 'physical'
                }
                getReservePeriod(params).then(response => {
                    this.periodList = response.data.data.periodList
                    this.swList = response.data.data.periodList.filter(item => {
                        return item.type === '1'
                    })
                    this.xwList = response.data.data.periodList.filter(item => {
                        return item.type === '2'
                    })
                    this.getDoctorReserve(this.radio)
                })
            },
            cancel(item) {
                this.$confirm('确定取消此预约?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        billId: item.billId
                    }
                    cancel(params).then(response => {
                        this.$message.success('取消成功')
                        this.getDoctorReserve(this.radio)
                    })
                })
            },
            choseDorcter(value) {
                // this.doctorId = value
               this.refresh()
            },
            getDoctorReserve(id) {
                let _this = this
                let params = {
                    date: this.dates,
                    doctorId: id
                }
                this.loading = true
                getDoctorReserve(params).then(response => {
                    this.loading = false
                    this.canReserve = response.data.data.canReserve
                    if (this.canReserve) {
                        response.data.data.schedulePeriodList.map(item => {
                            _this.swList.map(citem => {
                                if(citem.periodId === item.periodId) {
                                    citem.yystatus = item.status
                                    citem.billId = item.billId
                                    citem.canCancel = item.canCancel
                                    citem.hasBill = item.hasBill
                                }
                            })
                            _this.xwList.map(citem => {
                                if(citem.periodId === item.periodId) {
                                    citem.yystatus = item.status
                                    citem.billId = item.billId
                                    citem.canCancel = item.canCancel
                                    citem.hasBill = item.hasBill
                                }
                            })
                        })
                        _this.swList = Object.assign([], _this.swList)
                        _this.xwList = Object.assign([], _this.xwList)
                    }
                })
            },
            goDetail(item) {
                item.sexName = findByvalue(this.genderList, item.sex)
                this.personData = item
                this.dialogVisible2 = true
            },
            onSelect(value) {
                this.radio = ''
                this.dialogVisible = false
                this.dialogVisible1 = false
                this.swList = []
                this.xwList = []
                let newdate = new Date(value)
                this.dates = dateFormat(newdate, 'yyyy-MM-dd')
                this.getDates(dateFormat(newdate, 'yyyy-MM'))
                this.date = (newdate.getMonth() + 1) + '月' + newdate.getDate() + '日' + '  ' + findByvalue(this.week_day, String(newdate.getDay()))
                this.getReservePeriod()
                if (this.status === '1' && this.isOpenDate) {
                    getDoctorList({date: this.dates}).then(response => {
                        this.doctorList = response.data.data
                    })
                }
            },
        }
    }
</script>
<style scoped lang="scss">
.physical-schedule{
    /deep/.el-dialog__wrapper{
        top: 80px;
        left: 450px;
        .el-dialog{
            transform: translateX(-50%);
        }
    }
    .doctor-dialog{
        /deep/.el-dialog{
            transform: translateX(-10%);
        }
    }
    /deep/.v-modal{
        top: 80px;
        left: 120px;
    }
    .left-block {
        width: 300px;
        float: left;
        .left-block-top{
            height: 350px;
        }
        /deep/.ant-fullcalendar-header{
            text-align: left;
        }
        .slight-item{
            // background: #e6f7ff;
            border-bottom: 1px solid red;
            border-radius: 0;
            transition: auto;
            cursor: pointer;
        }
        .ant-fullcalendar-selected-day .ant-fullcalendar-value, .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value {
            color: #fff;
            background: #1890ff;
        }
        .restCls{
            position: relative;
            top: -10px;
            width: 28px;
            height: 28px;
            display: inline-block;
            left: 0px;
            border: 2px solid #67c23a;
        }
        .left-block-bottom{
            border-top: 1px solid #eee;
            height: calc(100vh - 460px);
           .el-radio-group{
                height: calc(100% - 30px);
                overflow: auto;
            }
            .bottom-header{
                height: 50px;
                line-height: 50px;
                background: #eee;
                font-size: 18px;
                font-weight: bold;
                padding-left: 20px; 
            }
            .empty-block{
                text-align: center;
                img{
                    width: 150px;
                    margin-top: 20px;
                }
            }
            /deep/.el-radio-group{
                width: 100%;
                .el-radio{
                    line-height: 50px;
                    height: 50px;
                    margin-right: 0;
                    .el-radio__label{
                        font-size: 18px;
                        color: #000;
                    }
                }
                .detail-span{
                    float: right;
                    cursor: pointer;
                    font-size: 18px;
                    line-height: 50px;
                    &:hover{
                        color: #409EFF;
                    }
                }
            }
        }
        /deep/.ant-fullcalendar-header{
            .ant-radio-group{
                display: none;
            }
        }
    }
    .content{
        /deep/.el-form-item--mini.el-form-item, /deep/.el-form-item--small.el-form-item{
            margin-bottom: 5px;
        }
    }
    .right-block{
        margin-left: 20px;
        width:calc(100% - 320px);
        float:left;
        .date-tip{
            float: left;
            margin-right: 10px;
            line-height: 30px;
        }
        .period-list{
            margin-top: 13px;
            height: calc((100vh - 190px)/2);
            .period-list-item{
                display: flex;
                justify-content: center;
                align-items: center;
                float: left;
                width: 16%;
                height: 40%;
                border: 1px solid #eee;
                .item-block{
                    text-align: center;
                }
                p{
                    margin-bottom: 8px;
                    &:first-child{
                        font-weight: bold;
                    }
                }
            }
            .blue{
                background: #f2f9ff;
            }
            .green{
                background: #f4fdf8;
            }
            .finish{
                background: #f8f8f8;
            }
            .finished{
                background: #fff6f7;
            }
        }
    }
}
</style>